<template>
  <div class="p8-container">
    <h2>
      The fundraiser has completed 3 campaigns in the platform, a summary of
      their performance on the production stage of the previously funded
      campaigns:
    </h2>
    <div class="chart-container">
      <div
        :class="className"
        :id="id"
        :style="{ height: height, width: width }"
      ></div>
      <div class="x1-label" v-show="x1Show">
        <p>
          <span class="title">Backers’ Inquiries </span>: Backer’s number of
          inquiries during the production stage:
          <span class="show-green">123</span>, which is
          <span class="show-green">71%</span> higher than platform average
        </p>
      </div>
      <div class="x2-label" v-show="x2Show">
        <p>
          <span class="title">Fundraiser’s Replies to Backers’ Inquiries</span>
          : Fundraiser’s reply ratio during the production stage:
          <span class="show-red">15%</span>, which is
          <span class="show-red">12%</span>lower than platform average
        </p>
      </div>
      <div class="x3-label" v-show="x3Show">
        <P>
          <span class="title">Sentiment of Backers’ Comments </span>
          : Backers’ overall sentiment valence during the production stage:
          <span class="show-red">0.3</span>, sentiment score ranges from 0
          (extreme negative) to 1 (extreme positive)
        </P>
      </div>
      <div class="x4-label" v-show="x4Show">
        <p>
          <span class="title"> Number of Updates </span>
          : Fundraiser posted <span class="show-green">5</span> updates during
          the production stage, which is
          <span class="show-green">56%</span> higher than platform average
        </p>
      </div>
      <div class="x5-label" v-show="x5Show">
        <p>
          <span class="title">Update Frequency </span>
          : Fundraiser’s update frequency during the production stage:
          <span class="show-red">15 days/post</span>, which is
          <span class="show-red">12%</span> lower than platform average
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  props: {
    className: {
      type: String,
      default: "chart"
    },
    id: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "200px"
    },
    height: {
      type: String,
      default: "200px"
    }
  },
  data() {
    return {
      chart: null,
      x5Show: false,
      x4Show: false,
      x3Show: false,
      x2Show: false,
      x1Show: false
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id));

      let option = {
        title: {
          // text: '预算 vs 开销（Budget vs spending）',
          // subtext: '纯属虚构'
        },
        tooltip: {},
        /* legend: {
                         orient: 'vertical',
                         x: 'right',
                         y: 'bottom',
                         data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
                     },*/

        radar: {
          indicator: [
            { text: "Backers Inquiries", max: 6000, color: "black" },
            { text: "Update Frequency", max: 16000, color: "black" },
            { text: "Number of Updates", max: 30000, color: "black" },
            { text: "Sentiment of Comments", max: 38000, color: "black" },
            { text: "Fundraisers Replies", max: 52000, color: "black" }
          ],
          triggerEvent: true
        },
        calculable: true,
        series: [
          {
            type: "radar",
            itemStyle: { normal: { 
                areaStyle: { type: "default" } ,
                color: "#7dc1ff"
            } },
            label: {
              color: "black"
            },
            areaStyle: {
              normal: {
                width: 1,
                opacity: 0.62,
                color: "#a0d3ff" // 选择区域颜色
              }
            },
            lineStyle: {
              color: "#7dc1ff"
            },
            data: [
              {
                value: [4300, 10000, 28000, 35000, 50000],
                name: "（Detail）"
              }
            ]
          }
        ]
      };

      this.chart.setOption(option);

      this.chart.on("click", params => {
        if ("Backers Inquiries" == params.name) {
          this.x1Show = !this.x1Show;
        } else if ("Update Frequency" == params.name) {
          this.x5Show = !this.x5Show;
        } else if ("Number of Updates" == params.name) {
          this.x4Show = !this.x4Show;
        } else if ("Sentiment of Comments" == params.name) {
          this.x3Show = !this.x3Show;
        } else if ("Fundraisers Replies" == params.name) {
          this.x2Show = !this.x2Show;
        }

        console.log(params);
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.p8-container {
  width: 600px;
  h2 {
    text-align: center;
    margin-bottom: 26px;
  }
  .chart-container {
    position: relative;
    .x1-label {
      position: absolute;
      top: 6px;
      left: 360px;
    }
    .x2-label {
      position: absolute;
      top: 160px;
      left: 460px;
    }
    .x3-label {
      position: absolute;
      top: 320px;
      left: 200px;
    }
    .x4-label {
      position: absolute;
      top: 220px;
      left: 10px;
    }
    .x5-label {
      position: absolute;
      top: 30px;
      left: 30px;
    }
    p {
      word-wrap: break-word;
      word-break: break-all;
      width: 180px;
      border: solid 1px gray;
      padding: 6px;
      background: white;
      z-index: 999;
    }
    .title {
      font-weight: bold;
    }

    .show-green {
      color: green;
    }
    .show-red {
      color: red;
    }
  }
}
</style>
